<template>
<div>
  <v-form ref="form" v-model="valid" lazy-validation v-if="user.id===loginUser.id">
<v-row class="ml-8 pk mt-8">
    <v-col cols="12" md="8">
      <!-- <v-row>
        <v-icon>mdi-camera</v-icon>
        <v-text-field @click="$refs.uploadImg.click()" v-model="avatar" label="Pick An Avatar"></v-text-field>
      </v-row> -->
      <v-text-field v-model="nickname" label="Name"></v-text-field>
      <v-text-field v-model="birthday" label="Birthday" @click="pickShow = true"></v-text-field>
      <v-date-picker v-model="birthday" v-show="pickShow" class="datepicker" color="normal" light></v-date-picker>
      <v-text-field v-model="email" label="E-mail"></v-text-field>
      <v-row class="mb-4 mx-2">
        <v-btn dark @click="gender = 1" :color="gender == 1 ? 'purple' : '#B4C1ED'">男</v-btn>
        <v-btn dark @click="gender = 2" class="mx-2" :color="gender == 2 ? 'purple' : '#B4C1ED'">女</v-btn>
        <v-btn dark @click="gender = 0" :color="gender == 0 ? 'purple' : '#B4C1ED'">保密</v-btn>
      </v-row>
      <v-distpicker
        :province="addressSelect.province"
        :city="addressSelect.city"
        :area="addressSelect.area"
        @province="setProvince"
        @city="setCity"
        @area="setArea"
      ></v-distpicker>
      <v-text-field v-model="user.address" label="Address"></v-text-field>
    </v-col>
    <v-col cols="12" md="5">
      <v-btn color="error" @click="submit">修改</v-btn>
      <v-btn color="primary" class="ml-6" @click="reset">重置</v-btn>
    </v-col>
  </v-row>
  </v-form>
  <div v-else>
    <h2>欢迎{{loginUser.nickname}}来到我的博客~</h2>
  </div>
</div>
  
</template>

<script>
import { mapState } from 'vuex'
import VDistpicker from 'v-distpicker'
export default {
  components: {
    VDistpicker
  },
  data: () => ({
    pickShow: false,
    addressSelect: { province: '', city: '', area: '' },
    nickname: '',
    birthday: '',
    email: '',
    gender: '',
    address: ''
  }),
  methods: {
    reset() {
      ;(this.avatar = ''), (this.nickname = ''), (this.email = ''), (this.sex = '')
    },
    submit() {
      let that = this
      let newuser = this.user
      newuser.nickname = this.nickname
      newuser.gender = this.gender
      newuser.email = this.email
      newuser.address = this.getAddressStr()
      newuser.birthday = this.birthday
      this.axios({
        method: 'POST',
        url: '/user/update',
        data: newuser
      }).then((res) => {
        console.log(res)
        this.$layer.alert('信息修改成功！', (x) => {
          that.$store.commit('editUserInfo', res.data.data)

          this.$layer.close(x)
        })
      })
    },
    getGenderStr(genderType) {
      if (genderType == 1) return '男'
      if (genderType == 2) return '女'
      if (genderType == 0) return '保密'
    },
    getGenderType(genderStr) {
      if (genderStr == '男') return 1
      if (genderStr == '女') return 2
      if (genderStr == '保密') return 0
    },
    setProvince(v) {
      this.addressSelect.province = v.value
    },
    setCity(v) {
      this.addressSelect.city = v.value
    },
    setArea(v) {
      this.addressSelect.area = v.value
    },
    getProvince() {
      return this.address.split('-')[0]
    },
    getCity() {
      return this.address.split('-')[1]
    },
    getArea() {
      return this.address.split('-')[2]
    },
    getAddressStr() {
      return `${this.addressSelect.province}-${this.addressSelect.city}-${this.addressSelect.area}`
    }
  },
  computed: {
    ...mapState({
      loginStatus: (state) => state.loginStatus,
      loginUser: (state) => state.loginUser,
      user: (state) => state.user
    })
  },
  created() {
    this.nickname = this.user.nickname
    this.birthday = this.user.birthday
    this.email = this.user.email
    this.gender = this.user.gender
    this.address = this.user.address

    this.addressSelect.province = this.getProvince()
    this.addressSelect.city = this.getCity()
    this.addressSelect.area = this.getArea()
  },
  mounted() {
    document.addEventListener('click', (e) => {
      let thisClassName = e.target.className
      thisClassName = thisClassName.split(' ')
      for (var i = 0; i < thisClassName.length; i++) {
        if (thisClassName[i] == 'col-md-8' || thisClassName[i] == 'pk') {
          this.pickShow = false
        }
      }
    })
  }
}
</script>

<style lang="scss">
.datepicker {
  position: absolute;
  z-index: 10;
}
</style>
